<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import apiService from './services/ApiService'

const isLoggedIn = ref(false)
const currentUser = ref(null)

// 处理用户登录事件
const handleUserLogin = (event) => {
  const { token } = event.detail
  isLoggedIn.value = !!token
  
  // 如果已登录，获取用户信息
  if (token) {
    const tokenData = apiService.verifyToken(token)
    if (tokenData.success) {
      currentUser.value = {
        username: tokenData.username
      }
    }
  }
}

onMounted(() => {
  // 检查用户是否已登录
  const token = localStorage.getItem('token')
  isLoggedIn.value = !!token
  
  // 如果已登录，获取用户信息
  if (token) {
    const tokenData = apiService.verifyToken(token)
    if (tokenData.success) {
      currentUser.value = {
        username: tokenData.username
      }
    }
  }
  
  // 监听用户登录事件
  window.addEventListener('user-login', handleUserLogin)
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('user-login', handleUserLogin)
})

const handleLogout = () => {
  localStorage.removeItem('token')
  isLoggedIn.value = false
  currentUser.value = null
  window.location.href =  '#/login'
}
</script>

<template>
  <div id="app">
    <header>
      <div class="header-content">
        <img alt="Vue logo" class="logo" :src="'./fav.svg'" width="125" height="125" />

        <div class="wrapper">
          <HelloWorld msg="股票量化交易系统" />

          <nav>
            <RouterLink to="/">首页</RouterLink>
            <RouterLink to="/stocks">股票列表</RouterLink>
            <RouterLink to="/stock-search">股票搜索</RouterLink>
            <RouterLink to="/stock-history">股票历史数据</RouterLink>
            <RouterLink to="/portfolio">我的投资组合</RouterLink>
            <RouterLink to="/trades">交易历史</RouterLink>
            <RouterLink to="/strategies">量化策略</RouterLink>
            <template v-if="!isLoggedIn">
              <RouterLink to="/login">登录</RouterLink>
              <RouterLink to="/register">注册</RouterLink>
            </template>
            <template v-else>
              <span class="welcome-message">欢迎, {{ currentUser?.username }}!</span>
              <a href="#" @click="handleLogout">退出登录</a>
            </template>
          </nav>
        </div>
      </div>
    </header>

    <RouterView />
  </div>
</template>

<style scoped>
header {
  line-height: 1.5;
  max-height: 100vh;
  background-color: var(--color-background-soft);
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
}

.logo {
  display: block;
  margin: 0 2rem 0 0;
}

.wrapper {
  flex: 1;
}

nav {
  width: 100%;
  font-size: 14px;
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

nav a.router-link-exact-active {
  color: var(--color-text);
  font-weight: bold;
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  transition: background-color 0.3s;
}

nav a:hover {
  background-color: hsla(160, 100%, 37%, 0.2);
}

.welcome-message {
  margin-right: 1rem;
  font-weight: bold;
  color: #4CAF50;
}

@media (min-width: 1024px) {
  header {
    padding: 1rem 0;
  }

  .header-content {
    display: flex;
    place-items: center;
    flex-wrap: wrap;
  }

  nav {
    text-align: left;
    margin-left: 0;
    font-size: 1rem;
    margin-top: 0;
    gap: 0.5rem;
  }
}
</style>